<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      v-bind="$attrs"
      @close="onClose"
      @open="onOpen"
      v-on="$listeners"
    >
      <el-row :gutter="18">
        <el-form
          ref="elForm"
          :model="subData"
          :rules="rules"
          label-width="100px"
          size="medium"
        >
          <el-col :span="18">
            <el-form-item label="院系名称" prop="name">
              <el-input
                v-model="subData.dptName"
                :style="{ width: '100%' }"
                clearable
                placeholder="请输入院系（专业）名称"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from "../../../utils/request";

export default {
  inheritAttrs: false,
  components: {},
  // 接受父组件传递的值
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false,
    },
    subData: {
      type: Object,
      default: null,
    },
    title: {
      type: String,
    },
    tag: {
      type: Number,
    },
    originName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      rules: {
        name: [
          {
            required: true,
            message: "请输入院系或者专业名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      // 控制弹出框显示隐藏
      showDialog: false,
    };
  },
  computed: {},
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible() {
      this.showDialog = this.addOrUpdateVisible;
    },
  },
  created() {},
  mounted() {},
  methods: {
    onOpen() {},
    onClose() {
      this.$refs["elForm"].resetFields();
      this.$emit("changeShow", "false");
      this.subData.menus = [];
    },
    close() {
      this.$refs["elForm"].resetFields();
      this.$emit("changeShow", "false");
      this.subData.menus = [];
    },
    async handleConfirm() {
      let temp = 0;
      await this.$refs["elForm"].validate((valid) => {
        if (!valid) {
          this.$message({
            message: "请填好表单后提交",
            type: "warning",
          });
          temp = 1;
        }
      });
      if (temp) {
        return;
      }
      let data = await request({
        url: "/department/updateOrAddMenu",
        method: "post",
        data: {
          id: this.subData.id,
          name: this.subData.dptName,
          parentId: this.subData.parentId,
          tag: this.tag,
        },
      });
      if (data.data.code === "2000") {
        this.$message({
          message: data.data.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: data.data.msg,
          type: "error",
        });
      }
      this.$emit("changeShow", "false");
    },
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit("changeShow", "false");
    },
  },
};
</script>
<style>
</style>
